<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue'
  import useInitThree from './useInitThree'
  import * as THREE from 'three'
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

  const container = ref(null)

  const { renderer, scene, camera } = useInitThree(container, 1000, 800)

  const renderParams = () => {
    // 创建几何体
    const cube = new THREE.Mesh()
    cube.geometry = new THREE.BoxGeometry(2, 2, 2)
    cube.material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    // 将网格对象添加到场景中
    scene.add(cube)
    // 设置相机位置
    camera.position.z = 5
    camera.position.y = 2
    camera.position.x = 2
    // 设置相机朝向
    camera.lookAt(cube.position)
    // 设置背景颜色
    scene.background = new THREE.Color(0x000000)
    // 设置光源
    const light = new THREE.DirectionalLight(0xffffff, 1)
    light.position.set(5, 5, 5).normalize()
    scene.add(light)
    // 设置环境光
    const ambientLight = new THREE.AmbientLight(0x404040) // soft white light
    scene.add(ambientLight)
    // 设置辅助坐标系
    const gridHelper = new THREE.GridHelper(10, 10, 0x0000ff, 0x808080)
    scene.add(gridHelper)

    // 设置坐标轴辅助器
    const axesHelper = new THREE.AxesHelper(5)
    scene.add(axesHelper)

    // 设置轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change', renderFun)
    // 设置带阻尼的惯性
    controls.enableDamping = true
    // 设置阻尼系数
    controls.dampingFactor = 0.25
    // 设置缩放比例
    controls.screenSpacePanning = false
    // 限制相机的垂直旋转角度
    controls.maxPolarAngle = Math.PI / 2
    renderFun()
  }

  // 渲染函数
  const renderFun = () => {
    renderer.render(scene, camera)
  }

  // 组件挂载时开始动画
  onMounted(() => {
    renderParams()
  })

  // 组件卸载时清理资源
  onUnmounted(() => {})
</script>

<template>
  <div
    ref="container"
    class="scene-container"
  ></div>
</template>

<style scoped></style>
